<!-- 
  v-***这种写法是vue的命令。
  v-***的命令必须依赖元素，并且写在元素的开始标签中。
  v-***支持es6中的模板字符串。
  v-***支持JavaScript的运算表达式。
  v-***支持函数调用。
  v-text可以将数据渲染成双标签中间的文本内容，但不识别html元素结构文本。
  v-html也是渲染双标签中间的文本，其可以识别html元素结构的文本。 
-->
<script setup>
  let msg = 'hello world';
  let redMsg = `<font color = 'red'>${msg}</font>`;
  // let greenMsg = `<font color = 'green'>${msg}</font>`;
  let greenMsg = `<font color = 'green'>${msg}`;
  

</script>

<template>
  <div>
    
    <span style="color: green; font-size:50px;">{{ msg }}</span><br />
    <span v-text="redMsg"></span><br />
    <span v-html="greenMsg + '</font>'"></span><br />
    
  </div>
</template>

<style scoped>

</style>
